<template>
  <div>
    <div>
      <vxe-grid
        ref="grid"
        resizable
        show-overflow
        highlight-hover-row
        keep-source
        row-id="id"
        height="300"
        :data="tableData"
        :columns="tableColumn"
        :toolbar-config="toolbarConfig"
      >
        <!-- 工具栏 -->
        <template #toolbar_buttons>
          <a-space>
            <a-button type="primary" @click="openBatchAddProductDialog">新增</a-button>
            <a-button danger @click="delProduct">删除</a-button>
          </a-space>
        </template>
        <!-- 商品名称 列自定义内容 -->
        <template #productName_default="{ row }">
          <span>{{ row.productName }}</span>
        </template>

        <template #unit_default="{ row }">
          <unit-selector v-model:value="row.unit" readOnly />
        </template>
      </vxe-grid>
      <batch-add-product ref="batchAddProductDialog" :sc-id="'1234'" @confirm="addProduct" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, getCurrentInstance } from 'vue';
  import { VxeTableDefines } from 'vxe-pc-ui';
  import BatchAddProduct from '@/views/sc/sale/batch-add-product.vue';
  import UnitSelector from '@/components/Selector/src/UnitSelector.vue';

  // this对象
  const instance: any = getCurrentInstance();

  // 表格数据
  const tableData = defineModel('tableData', {
    type: Array,
    default: () => [],
  });

  const grid = ref();

  const batchAddProductDialog = ref();

  // 表格列配置
  const tableColumn = reactive<VxeTableDefines.ColumnOptions[]>([
    { type: 'checkbox', width: 45 },
    { field: 'productCode', title: '商品编号', width: 120 },
    {
      field: 'productName',
      title: '商品名称',
      width: 160,
      slots: { default: 'productName_default' },
    },
    { field: 'skuCode', title: '商品SKU编号', width: 120 },
    { field: 'externalCode', title: '商品简码', width: 120 },
    { field: 'unit', title: '单位', width: 80, slots: { default: 'unit_default' } },
    { field: 'spec', title: '规格', width: 80 },
    { field: 'categoryName', title: '商品分类', width: 120 },
    { field: 'brandName', title: '商品品牌', width: 120 },
  ]);

  // 工具栏配置
  const toolbarConfig = reactive({
    // 缩放
    zoom: false,
    // 自定义表头
    custom: false,
    // 右侧是否显示刷新按钮
    refresh: false,
    // 自定义左侧工具栏
    slots: {
      buttons: 'toolbar_buttons',
    },
  });

  const openBatchAddProductDialog = () => {
    batchAddProductDialog.value.openDialog();
  };

  // 批量新增商品
  const addProduct = (productList: any[]) => {
    productList.forEach((item) => {
      tableData.value.push(emptyProduct());
      handleSelectProduct(tableData.value.length - 1, item);
    });
  };

  const emptyProduct = () => {
    return {
      id: _This().$utils.uuid(),
    };
  };

  // 选择商品
  const handleSelectProduct = (index, value) => {
    tableData.value[index] = value;
  };

  const delProduct = () => {
    const records = grid.value.getCheckboxRecords();
    if (_This().$utils.isEmpty(records)) {
      _This().$msg.createError('请选择要删除的商品数据！');
      return;
    }
    _This()
      .$msg.createConfirm('是否确定删除选中的商品？')
      .then(() => {
        const data = tableData.value.filter((t) => {
          const tmp = records.filter((item) => item.id === t?.id);
          return _This().$utils.isEmpty(tmp);
        });

        tableData.value = data;
      });
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };
</script>

<style scoped></style>
